<template>
    <div class="nav-heard-wrap" :style = "`background: rgba(248, 248, 248, ${opacity}); position: ${search_position}`" >
        <div class="search-wrap" @click="search()">
            <van-icon name="search" class="search-icon"/>
            <span>搜目的地、景点、酒店等</span>
        </div>
        <!-- <van-icon class="erweima" name="scan" /> -->
    </div>
</template>

<script>
export default {
    name: 'WorkspaceJsonNavhearder',

    data() {
        return {
            opacity: 1,
            search_position: ''
        };
    },
    created() {
        this.$bus.on('search_opacity', this.change_opacity)                 //接收目的地页面改变搜索框背景透明度数据
        this.$bus.on('search_position', this.change_position)         
    },

    mounted() {
        
    },

    beforeDestroy() {
        this.$bus.off('search_opacity', this.change_opacity)
        this.$bus.off('search_position', this.change_position)

    },

    methods: {
        search(){
            this.$router.push('/search')
        },
        change_opacity(opacity) {              //如果有目的地页面传来数据改变搜索框透明度
            this.opacity = opacity;
        },
        change_position(position) {              
            this.search_position = position;
        }
    },
};
</script>

<style lang="scss" scoped>
.nav-heard-wrap{
    // margin-bottom:20px ;
    width: 100%;
    height: 100px;
    /* background-image: url('../assets/nav-bac.jpg'); */
    display: flex;
    justify-content: center;
    /* align-items: center; */
    padding: 10px;
    box-sizing: border-box;
    .search-wrap{
        margin: 25px 0 15px 0;
        background: #fff;
        width: 95%;
        height: 45px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
        border-radius: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        .search-icon{
            margin: 2px 5px 0 0;
            font-size: 20px;
            color: rgb(170, 163, 163);
        }
        >span{
            color: rgb(170, 163, 163);
            font-size: 16px;
        }
    }
    .erweima{
        font-size: 45px;
        color: rgb(138, 138, 138);
        margin-left:5px ;
    }
}
</style>